function MenuItem(data) {
    this.name = data.name || "";
    this.left = data.left || 0; // position on canvas
    this.top = data.top || 0; // position on canvas
    this.width = data.width || 100; // width of button
    this.height = data.height || 30; // height of button
    this.text = data.text || "Menu Item";
    this.size = data.size || "20 px;"
    this.image = data.image || ""; // image file
    this.imageX = data.imageX || 0; // position of button in image file
    this.imageY = data.imageY || 0; // position of button in image file
    this.onclick = data.onclick; // onclick event
    this.isDraw = data.isDraw; // draw this item or not

    this.right = this.left + this.width;
    this.bottom = this.top + this.height;
    this.centerX = this.left + this.width / 2;
    this.centerY = this.top + this.height / 2;
    
    this.isPlaying = false;

    this.isMouseOver = false;

    if (this.name == "sound") {
        this.isMute = data.isMute || false;
    }

    this.update = function() {

    };
    this.draw = function(context) {
        

        // draw image
        if (this.isDraw) {
            // draw
            if (this.image) {
                context.drawImage(this.image, this.imageX, this.imageY, this.width, 
                this.height, this.left, this.top, this.width - 20, this.height - 20);
            } else {
                context.font = "bold " + this.size+ " disney";
                context.textAlign = "center";
                context.fillStyle = "white";
                context.fillText(this.text, this.centerX, this.centerY);
            }

            // hover
            if (this.image) {
                if (this.isMouseOver) {
                    if(!this.isPlaying) {
                        if(!_isMute) {
                            console.log("Play in menu items");
                            soundManager.play('click');
                        }
                        this.isPlaying = true;
                    }
                context.drawImage(this.image, this.imageX, this.imageY, this.width, this.height, this.left - 10, this.top - 10, this.width, this.height);
                }
                else {
                    context.drawImage(this.image, this.imageX, this.imageY, this.width, this.height, this.left, this.top, this.width - 20, this.height - 20);
                    this.isPlaying = false;
                }
            } else { // text

            }
        }
    };
    this.contain = function(x, y) {
        return !(x < this.left - 4 || x > this.right - 4 || y < this.top - 4 || y > this.bottom - 4);
    };
}